<template>
  <div>
    <SlotName>
      <template #default>
        这是将填充默认插槽
      </template>
<!--      具名插槽数据使用: 可以解构插槽内部暴露的数据-->
      <template #author="{ msg, user: { foo, baz } }">
        <p>{{msg}}</p>
        <span>{{foo}}--- {{baz}}</span>
      </template>

      <template #content>
        这里是content插槽区域
      </template>
    </SlotName>
  </div>
</template>

<script lang="ts">
  import { Component, Prop, Vue } from 'vue-property-decorator';
  import SlotName from "@/components/slot/SlotName.vue";

  @Component({
    name: 'UseSlot',
    components: {
      SlotName
    }
  })
  export default class UseSlot extends Vue {
  };
</script>

<style scoped>

</style>
